<!DOCTYPE html>
<html lang="en">

  <head>
    <base href="./../">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
    <title>CoreUI Free Bootstrap Admin Template</title>
    <!-- Icons-->
    <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
    <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
    <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
    <!-- Main styles for this application-->
    <link href="css/style.css" rel="stylesheet">
  </head>



<body>

    <div class="card"> 
 <div class="card-header"> 
  <strong>Standard Buttons</strong> 
 </div> 
 <div class="card-body"> 
  <div class="row align-items-center"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Normal
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-primary" type="button">Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-secondary" type="button">Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-success" type="button">Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-warning" type="button">Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-danger" type="button">Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-info" type="button">Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-light" type="button">Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-dark" type="button">Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-link" type="button">Link</button> 
   </div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Active State
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-primary active" type="button" aria-pressed="true">Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-secondary active" type="button" aria-pressed="true">Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-success active" type="button" aria-pressed="true">Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-warning active" type="button" aria-pressed="true">Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-danger active" type="button" aria-pressed="true">Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-info active" type="button" aria-pressed="true">Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-light active" type="button" aria-pressed="true">Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-dark active" type="button" aria-pressed="true">Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-link active" type="button" aria-pressed="true">Link</button> 
   </div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Disabled
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-primary" type="button" disabled>Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-secondary" type="button" disabled>Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-success" type="button" disabled>Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-warning" type="button" disabled>Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-danger" type="button" disabled>Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-info" type="button" disabled>Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-light" type="button" disabled>Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-dark" type="button" disabled>Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-link" type="button" disabled>Link</button> 
   </div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header"> 
  <strong>Outline Buttons</strong> 
 </div> 
 <div class="card-body"> 
  <p>Use <code>.btn-outline-*</code> class for outline buttons.</p> 
  <div class="row align-items-center"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Normal
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-primary" type="button">Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-secondary" type="button">Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-success" type="button">Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-warning" type="button">Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-danger" type="button">Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-info" type="button">Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-light" type="button">Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-dark" type="button">Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Active State
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-primary active" type="button" aria-pressed="true">Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-secondary active" type="button" aria-pressed="true">Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-success active" type="button" aria-pressed="true">Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-warning active" type="button" aria-pressed="true">Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-danger active" type="button" aria-pressed="true">Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-info active" type="button" aria-pressed="true">Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-light active" type="button" aria-pressed="true">Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-dark active" type="button" aria-pressed="true">Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Disabled
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-primary" type="button" disabled>Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-secondary" type="button" disabled>Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-success" type="button" disabled>Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-warning" type="button" disabled>Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-danger" type="button" disabled>Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-info" type="button" disabled>Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-light" type="button" disabled>Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-outline-dark" type="button" disabled>Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header"> 
  <strong>Ghost Buttons</strong> 
 </div> 
 <div class="card-body"> 
  <p>Use <code>.btn-ghost-*</code> class for ghost buttons.</p> 
  <div class="row align-items-center"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Normal
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-primary" type="button">Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-secondary" type="button">Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-success" type="button">Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-warning" type="button">Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-danger" type="button">Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-info" type="button">Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-light" type="button">Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-dark" type="button">Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Active State
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-primary active" type="button" aria-pressed="true">Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-secondary active" type="button" aria-pressed="true">Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-success active" type="button" aria-pressed="true">Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-warning active" type="button" aria-pressed="true">Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-danger active" type="button" aria-pressed="true">Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-info active" type="button" aria-pressed="true">Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-light active" type="button" aria-pressed="true">Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-dark active" type="button" aria-pressed="true">Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Disabled
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-primary" type="button" disabled>Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-secondary" type="button" disabled>Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-success" type="button" disabled>Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-warning" type="button" disabled>Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-danger" type="button" disabled>Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-info" type="button" disabled>Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-light" type="button" disabled>Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-block btn-ghost-dark" type="button" disabled>Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"></div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header"> 
  <strong>Square Buttons</strong> 
 </div> 
 <div class="card-body"> 
  <p>Use <code>.btn-square</code> class for square buttons.</p> 
  <div class="row align-items-center"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Normal
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-primary" type="button">Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-secondary" type="button">Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-success" type="button">Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-warning" type="button">Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-danger" type="button">Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-info" type="button">Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-light" type="button">Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-dark" type="button">Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-link" type="button">Link</button> 
   </div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Active State
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-primary active" type="button" aria-pressed="true">Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-secondary active" type="button" aria-pressed="true">Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-success active" type="button" aria-pressed="true">Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-warning active" type="button" aria-pressed="true">Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-danger active" type="button" aria-pressed="true">Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-info active" type="button" aria-pressed="true">Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-light active" type="button" aria-pressed="true">Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-dark active" type="button" aria-pressed="true">Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-link active" type="button" aria-pressed="true">Link</button> 
   </div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Disabled
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-primary" type="button" disabled>Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-secondary" type="button" disabled>Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-success" type="button" disabled>Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-warning" type="button" disabled>Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-danger" type="button" disabled>Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-info" type="button" disabled>Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-light" type="button" disabled>Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-dark" type="button" disabled>Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-square btn-block btn-link" type="button" disabled>Link</button> 
   </div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header"> 
  <strong>Pill Buttons</strong> 
 </div> 
 <div class="card-body"> 
  <p>Use <code>.btn-pill</code> class for pill buttons.</p> 
  <div class="row align-items-center"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Normal
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-primary" type="button">Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-secondary" type="button">Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-success" type="button">Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-warning" type="button">Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-danger" type="button">Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-info" type="button">Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-light" type="button">Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-dark" type="button">Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-link" type="button">Link</button> 
   </div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Active State
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-primary active" type="button" aria-pressed="true">Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-secondary active" type="button" aria-pressed="true">Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-success active" type="button" aria-pressed="true">Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-warning active" type="button" aria-pressed="true">Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-danger active" type="button" aria-pressed="true">Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-info active" type="button" aria-pressed="true">Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-light active" type="button" aria-pressed="true">Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-dark active" type="button" aria-pressed="true">Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-link active" type="button" aria-pressed="true">Link</button> 
   </div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Disabled
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-primary" type="button" disabled>Primary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-secondary" type="button" disabled>Secondary</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-success" type="button" disabled>Success</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-warning" type="button" disabled>Warning</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-danger" type="button" disabled>Danger</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-info" type="button" disabled>Info</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-light" type="button" disabled>Light</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-dark" type="button" disabled>Dark</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0"> 
    <button class="btn btn-pill btn-block btn-link" type="button" disabled>Link</button> 
   </div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header"> 
  <strong>Sizes</strong> 
 </div> 
 <div class="card-body"> 
  <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p> 
  <div class="row align-items-center"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Small add 
    <code>.btn-sm</code> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-sm btn-primary" type="button">Standard Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-sm btn-outline-secondary" type="button">Outline Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-sm btn-ghost-success" type="button">Ghost Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-sm btn-square btn-warning" type="button">Square Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-sm btn-pill btn-danger" type="button">Pill Button</button> 
   </div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Normal
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-primary" type="button">Standard Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-outline-secondary" type="button">Outline Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-ghost-success" type="button">Ghost Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-square btn-warning" type="button">Square Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-pill btn-danger" type="button">Pill Button</button> 
   </div> 
  </div> 
  <div class="row align-items-center mt-3"> 
   <div class="col-12 col-xl mb-3 mb-xl-0">
    Large add 
    <code>.btn-lg</code>.
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-lg btn-primary" type="button">Standard Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-lg btn-outline-secondary" type="button">Outline Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-lg btn-ghost-success" type="button">Ghost Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-lg btn-square btn-warning" type="button">Square Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-lg btn-pill btn-danger" type="button">Pill Button</button> 
   </div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header"> 
  <strong>With Icons</strong> 
 </div> 
 <div class="card-body"> 
  <div class="row align-items-center mt-3"> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-primary" type="button"> <i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-outline-secondary" type="button"> <i class="fa fa-lightbulb-o"></i>&nbsp;Outline Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-ghost-success" type="button"> <i class="fa fa-lightbulb-o"></i>&nbsp;Ghost Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-square btn-warning" type="button"> <i class="fa fa-lightbulb-o"></i>&nbsp;Square Button</button> 
   </div> 
   <div class="col-6 col-sm-4 col-md mb-3 mb-xl-0 text-center"> 
    <button class="btn btn-pill btn-danger" type="button"> <i class="fa fa-lightbulb-o"></i>&nbsp;Pill Button</button> 
   </div> 
  </div> 
 </div> 
</div> 
<div class="row"> 
 <div class="col-md-6"> 
  <div class="card"> 
   <div class="card-header"> 
    <strong>Block Level Buttons</strong> 
   </div> 
   <div class="card-body"> 
    <p>Add this class <code>.btn-block</code> </p> 
    <button class="btn btn-secondary btn-lg btn-block" type="button">Block level button</button> 
    <button class="btn btn-primary btn-lg btn-block" type="button">Block level button</button> 
    <button class="btn btn-success btn-lg btn-block" type="button">Block level button</button> 
    <button class="btn btn-info btn-lg btn-block" type="button">Block level button</button> 
    <button class="btn btn-warning btn-lg btn-block" type="button">Block level button</button> 
    <button class="btn btn-danger btn-lg btn-block" type="button">Block level button</button> 
    <button class="btn btn-link btn-lg btn-block" type="button">Block level button</button> 
   </div> 
  </div> 
 </div> 
 <!-- /.col--> 
 <div class="col-md-6"> 
  <div class="card"> 
   <div class="card-header"> 
    <strong>Block Level Buttons</strong> 
   </div> 
   <div class="card-body"> 
    <p>Add this class <code>.btn-block</code> </p> 
    <button class="btn btn-outline-secondary btn-lg btn-block" type="button">Block level button</button> 
    <button class="btn btn-outline-primary btn-lg btn-block" type="button">Block level button</button> 
    <button class="btn btn-outline-success btn-lg btn-block" type="button">Block level button</button> 
    <button class="btn btn-outline-info btn-lg btn-block" type="button">Block level button</button> 
    <button class="btn btn-outline-warning btn-lg btn-block" type="button">Block level button</button> 
    <button class="btn btn-outline-danger btn-lg btn-block" type="button">Block level button</button> 
   </div> 
  </div> 
 </div> 
 <!-- /.col--> 
</div> 
<!-- /.row-->
	
	

    <script src="../js/iframeResizer/iframeResizer.contentWindow.js"></script>
	<script src="vendors/jquery/js/jquery.min.js"></script>
<script src="vendors/popper.js/js/popper.min.js"></script>
<script src="vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
<script src="vendors/@coreui/coreui/js/coreui.min.js"></script>

</body>

</html>